<template>
<button 
type="button"
:class="[
  bem.b(),
  bem.m(color),
  bem.m(size),
  bem.m(shape),
  {
    'is-plain':plain,
    'a-button--loading':loading
  }
  ]"
     @click="handleClick"
>
<span class="a-button__load-wrap" v-if="loading||icon">
    <a-icon   :name="icon||'loading'"></a-icon>
</span>
  <span  class="a-button__text"><slot></slot>
</span>
</button>

</template>


<script setup lang="ts">
import { createNamespace } from '@/util/create'
import { buttonEmits, buttonProps } from './button'


defineOptions({
    name:'a-button'
})
const bem = createNamespace('button')


const props = defineProps(buttonProps)
const emit = defineEmits(buttonEmits)
const handleClick = (e: MouseEvent) => { 
    emit('click',e)
}
</script>
 